<!-- 模仿天猫整站springboot 教程 为how2j.cn 版权所有-->
<!-- 本教程仅用于学习使用，切勿用于非法用途，由此引起一切后果与本站无关-->
<!-- 供购买者学习，请勿私自传播，否则自行承担相关法律责任-->

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:include="include/admin/adminHeader::html('产品管理')" ></head>
<body>
<div th:replace="include/admin/adminNavigator::html" ></div>
<script>
    $(function(){
        var pid = getUrlParms("pid");
        var data4Vue = {
            uri:'productImages',
            singleProductImages: [],
            detailProductImages: [],
            product: '',
            category:'',
            singleFile:'',
            detailFile:''
        };

        //ViewModel
        var vue = new Vue({
            el: '#workingArea',
            data: data4Vue,
            mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
                this.listSingles();
                this.listDetails();
                this.getProduct(pid);
            },
            methods: {
                getProduct:function(pid){
                    var url = "products/"+pid;
                    axios.get(url).then(function(response) {
                        vue.product = response.data;
                        vue.category = vue.product.category;
                    })
                },
                listSingles:function(start){
                    var url =  "products/"+pid+"/"+this.uri+"?type=single";
                    axios.get(url).then(function(response) {
                        vue.singleProductImages = response.data;
                    });
                },
                listDetails:function(start){
                    var url =  "products/"+pid+"/"+this.uri+"?type=detail";
                    axios.get(url).then(function(response) {
                        vue.detailProductImages = response.data;
                    });
                },
                addSingle: function () {
                    if(!checkEmpty(this.singleFile, "单个产品图片"))
                        return;

                    var url = this.uri+"?type=single&pid="+pid;

                    var formData = new FormData();
                    formData.append("image", this.singleFile);

                    axios.post(url,formData).then(function(response){
                        vue.listSingles();
                        $("#singlePic").val('');
                        vue.singleFile = null;
                    });
                },
                addDetail: function () {
                    if(!checkEmpty(this.detailFile, "详情产品图片"))
                        return;

                    var url = this.uri+"?type=detail&pid="+pid;

                    var formData = new FormData();
                    formData.append("image", this.detailFile);

                    axios.post(url,formData).then(function(response){
                        vue.listDetails();
                        $("#detailPic").val('');
                        vue.detailFile = null;
                    });
                },
                deleteBean: function (id) {
                    if(!checkDeleteLink())
                        return;
                    var url = this.uri+"/"+id;
                    axios.delete(url).then(function(response){
                        vue.listSingles();
                        vue.listDetails();
                    });
                },
                getSingleFile: function (event) {
                    this.singleFile = event.target.files[0];
                },
                getDetailFile: function (event) {
                    this.detailFile = event.target.files[0];
                },
            }

        });
    });

</script>

<div id="workingArea" >
    <ol class="breadcrumb">
        <li><a href="admin_category_list">所有分类</a></li>
        <li><a :href="'admin_product_list?cid='+category.id">{{category.name}}</a></li>
        <li class="active">{{product.name}}</li>
        <li class="active">产品图片管理</li>
    </ol>

    <table class="addPictureTable" align="center">
        <tr>
            <td class="addPictureTableTD">
                <div>
                    <div class="panel panel-warning addPictureDiv">
                        <div class="panel-heading">新增产品<b class="text-primary"> 单个 </b>图片</div>
                        <div class="panel-body">
                            <table class="addTable">
                                <tr>
                                    <td>请选择本地图片 尺寸400X400 为佳</td>
                                </tr>
                                <tr>
                                    <td>
                                        <input id="singlePic" type="file" @change="getSingleFile($event)" name="image" />
                                    </td>
                                </tr>
                                <tr class="submitTR">
                                    <td align="center">
                                        <button type="submit" @click="addSingle" class="btn btn-success">提 交</button>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <table class="table table-striped table-bordered table-hover  table-condensed">
                        <thead>
                        <tr class="success">
                            <th>ID</th>
                            <th>产品单个图片缩略图</th>
                            <th>删除</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="pi in singleProductImages">
                            <td>{{pi.id}}</td>
                            <td>
                                <a title="点击查看原图" :href="'img/productSingle/'+pi.id+'.jpg'"><img height="50px" :src="'img/productSingle/'+pi.id+'.jpg'"></a>
                            </td>
                            <td><a href="#nowhere" @click="deleteBean(pi.id)"><span class="glyphicon glyphicon-trash"></span></a></td>

                        </tr>
                        </tbody>
                    </table>

                </div>
            </td>
            <td class="addPictureTableTD">
                <div>

                    <div class="panel panel-warning addPictureDiv">
                        <div class="panel-heading">新增产品<b class="text-primary"> 详情 </b>图片</div>
                        <div class="panel-body">
                            <table class="addTable">
                                <tr>
                                    <td>请选择本地图片 宽度790  为佳</td>
                                </tr>
                                <tr>
                                    <td>
                                        <input id="detailPic" type="file" @change="getDetailFile($event)" name="image" />
                                    </td>
                                </tr>
                                <tr class="submitTR">
                                    <td align="center">
                                        <button type="submit" @click="addDetail" class="btn btn-success">提 交</button>
                                    </td>
                                </tr>
                            </table>

                        </div>
                    </div>
                    <table class="table table-striped table-bordered table-hover  table-condensed">
                        <thead>
                        <tr class="success">
                            <th>ID</th>
                            <th>产品详情图片缩略图</th>
                            <th>删除</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="pi in detailProductImages">
                            <td>{{pi.id}}</td>
                            <td>
                                <a title="点击查看原图" :href="'img/productDetail/'+pi.id+'.jpg'"><img height="50px" :src="'img/productDetail/'+pi.id+'.jpg'"></a>
                            </td>
                            <td><a href="#nowhere" @click="deleteBean(pi.id)"><span class="glyphicon glyphicon-trash"></span></a></td>

                        </tr>
                        </tbody>
                    </table>
                </div>
            </td>
        </tr>
    </table>

</div>



<div th:replace="include/admin/adminFooter::html" ></div>
</body>
</html>
